import React, { PureComponent } from 'react'
import { View, StyleSheet, Text } from 'react-native'
import PropTypes from 'prop-types'
import { ScaleT, ScaleS } from 'src/utils/ScreenUtil'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'
import { WIDTH, IS_IOS } from '../../utils/ScreenUtil'
import Carousel, { Pagination } from 'react-native-snap-carousel'
import { homeBannerList } from 'src/utils/RequestAPI'

const sliderWidth = WIDTH
const sliderHeight = ScaleS(108)
const itemWidth = ScaleS(268)
const itemHeight = ScaleS(108)

export default class HomeBannerC extends PureComponent {
  static propTypes = {
    swiperClick: PropTypes.func,
    cityName: PropTypes.string
  }

  static defaultProps = {
  }

  constructor(props) {
    super(props)
    this.state = {
      recommend: null,
      recommendActive: 0
    }
  }

  componentDidMount() {
    this._homeBannerList(this.props.cityName)
  }
  componentWillUpdate(props) {
    if (props.cityName !== this.props.cityName) {
      this._homeBannerList(props.cityName)
    }
  }
  /**
   * 首页banner
   * @private
   */
  _homeBannerList = (cityName) => {
    homeBannerList({ city: cityName }).then((data) => {
      const { data: banners = [] } = data
      this.setState({
        recommend: banners
      })
    })
  }

  render() {
    const { recommend } = this.state
    return (
      <View style={styles.container}>
        {recommend && recommend.length > 0 &&
          <Carousel
            data={recommend}
            renderItem={this._renderItemSwiper}
            onSnapToItem={this.handleSnapToItem}
            sliderWidth={sliderWidth}
            sliderHeight={sliderHeight}
            itemWidth={itemWidth}
            itemHeight={itemHeight}
            activeSlideAlignment={'start'}
            inactiveSlideScale={1}
            inactiveSlideOpacity={1}
            layout={'default'}
            autoplay={true}
            loop={IS_IOS}
            autoplayInterval={5000}
            enableSnap={true}
            useScrollView={IS_IOS}
            contentContainerCustomStyle={styles.sliderContentContainer}
          />}
        {recommend && recommend.length > 0 && this.pagination}
      </View>
    )
  }

  _renderItemSwiper = ({ item, index }) => {
    return (
      <View style={styles.sliderShadow}>
        <CustomButton
          style={styles.sliderBtn}
          key={index} params={{ item, index }} onPress={this.props.swiperClick}
          activeOpacity={1}>
          <CustomImage style={styles.img} source={{ uri: item.img }} />
        </CustomButton>
      </View>
    )
  }

  get pagination() {
    const { recommend, recommendActive } = this.state
    return (
      <Pagination
        dotsLength={recommend.length}
        activeDotIndex={recommendActive}
        containerStyle={styles.paginationStyle}
        dotContainerStyle={styles.dotContainerStyle}
        dotStyle={styles.activeDot}
        inactiveDotStyle={styles.dot}
      />
    )
  }

  handleSnapToItem = recommendActive => {
    this.setState({
      recommendActive
    })
  }
}
const styles = StyleSheet.create({
  container: {
    marginLeft: ScaleS(20),
    marginTop: ScaleS(20)
  },
  img: {
    width: itemWidth,
    height: itemHeight,
    resizeMode: 'cover'
  },
  dot: {
    width: ScaleS(4),
    height: ScaleS(4),
    borderRadius: ScaleS(2),
    backgroundColor: '#E5E5E5'
  },
  activeDot: {
    width: ScaleS(10),
    height: ScaleS(4),
    backgroundColor: '#3C3C3C'
  },
  paginationStyle: {
    paddingTop: ScaleS(15),
    paddingBottom: 0
  },
  dotContainerStyle: {
    width: ScaleS(4),
    height: ScaleS(4),
    borderRadius: ScaleS(2),
    backgroundColor: '#E5E5E5',
    marginHorizontal: ScaleS(3)
  },
  sliderBtn: {
    borderRadius: ScaleS(6),
    overflow: 'hidden',
    width: '100%',
    height: itemHeight
  },
  sliderShadow: {
    width: itemWidth,
    height: itemHeight,
    paddingRight: ScaleS(10),
    overflow: 'visible'
  },
  sliderContentContainer: {
    // paddingVertical: ScaleS(10)
  }
})
